<template>
  <div class="draggable-edit">
    <div class="home-box" v-if="pagePlay && pagePlay.play.fields.length!=0">
      <draggable class="home-draggable" v-model="pagePlay.play.fields" item-key="id" :group="{ name: 'people', pull: false, put: true }" :sort="true"
        animation="100" @end="endHandleWidget">
        <template #item="{ element,index }">
          <div class="tulingLayout-formli" @click="selectHandleWidget(index)"
            :class="{ 'tulingLayout-active': currentIndex == index }"
            :style="`width: ${pagePlay.play.attribute.pcStyle.colCount ? 100 / Number(pagePlay.play.attribute.pcStyle.colCount) : 100}%;`">
            <div class="tulingLayout-formlable">
              <el-image class="tulingLayout-formlable_ft1" :src="element.icon" v-if="element.icon"></el-image>
              <span class="tulingLayout-formlable_ft2">{{ index + 1 }}、</span>
              {{ element.name }}
            </div>
            <div class="tulingLayout-gli">
              <component :is="element.element" :widget="element"/>
            </div>
            <div class="tulingLayout-but" v-if="currentIndex == index" @click="daleteTab(element)">
              <el-icon>
                <Delete></Delete>
              </el-icon>
            </div>
          </div>
        </template>
      </draggable>
    </div>
    <div class="draggable-noneData" v-else>
      <span class="draggable-noneData_span">从左侧拖拽来添加字段</span>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'zero-form-view',
  components: {
    draggable
  },  
  data() {
    return {
      pagePlay: null, // 页面渲染
      layoutType: 1,
      currentIndex: null,
      sourceData: [],
      activeName: 'basic',
      tabPaneIndex: null,
      currentKay: 0
    }
  },
  mounted() {
    this.initListener()
    // this.postMessage('client_test_form_ace', 'ala-admin') // 唤起服务端的方法
  },
  methods: {
    onMove() {
      return true
    },
    initListener() {
      // 监听服务端方法
      window.addEventListener('message', (event) => {
        const {
          type,
          data,
          fieldIndex,
          isAdd
        } = event.data || {}
        // console.info('clientPlay', fieldIndex, data)
        switch (type) {
          case 'clientPlay':            
            this.pagePlay = data
            this.sourceData = data.play.fields
            // console.log('yyywwwwwwwwwww',this.pagePlay)
            if(isAdd) {
              this.selectHandleWidget(fieldIndex)
            }            
            break
        }
      })
    },
    // 多标签鼠标移入
    tabPanefunc(vdata,vIndex) {
      // this.tabPaneIndex = vIndex
      // var paraModel = {
      //   data: vdata,
      //   index: vIndex
      // }
      // console.log('22222222222222222',paraModel)
      // this.postMessage('multi_label_init_change', paraModel)
    },
    // 鼠标移出
    handleLeave() {
      this.tabPaneIndex = null
    },
    postMessage(type, data) {
      parent.postMessage({
        type,
        data
      }, '*')
    },
    // 拖拽结束方法
    endHandleWidget (evt) {     
      var sourceData =  JSON.parse(JSON.stringify(this.sourceData))
      var originalArray1 = sourceData[evt.oldIndex] //原数据
      var originalArray2 = sourceData[evt.newIndex] //当前数据    
      var valueObject = JSON.parse(JSON.stringify(this.pagePlay))      
      this.currentIndex = evt.newIndex
      // 拖拽x,y转换
      valueObject.formEngine.fields[evt.newIndex].x = originalArray2.x
      valueObject.formEngine.fields[evt.newIndex].y = originalArray2.y
      valueObject.formEngine.fields[evt.oldIndex].x = originalArray1.x
      valueObject.formEngine.fields[evt.oldIndex].y = originalArray1.y
      this.rightInit(valueObject.formEngine.fields[this.currentIndex])   
      // 执行保存方法
      this.postMessage('head_save_init', valueObject)   
    },
    // 选中方法
    selectHandleWidget(vIndex) {
      this.currentIndex = vIndex
      var fields = JSON.parse(JSON.stringify(this.pagePlay.play.fields))
      this.rightInit(fields[this.currentIndex])
    },
    //修改右侧属性方法
    rightInit(data) {
      this.postMessage('right_property_change', data)
    },
    // 删除方法
    daleteTab(data) {
      this.postMessage('adminDeleteChange', JSON.parse(JSON.stringify(data)))
    },
    //标签切换
    handleClick(e) {
      this.currentKay = e.index
      // console.log('标签切换',e.index)
    }
  }
}
</script>
<style lang="scss">
.draggable-edit{
  width: 100vw;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
}

.draggable-noneData{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
  .draggable-noneData_span{
    font-size: 20px;
    color: #999;
    text-align: center;
    letter-spacing: 2px;
  }
}

.home-box {
  box-sizing: border-box;
  .tulingLayout-formli {
    border-radius: 6px;
    padding: 10px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    vertical-align: text-top;
    box-sizing: border-box;

    .tulingLayout-formlable {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 13px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .tulingLayout-formlable_ft1 {
        width: 16px;
        height: 16px;
        margin-right: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .tulingLayout-formlable_ft2 {
        font-size: 13px;
        color: #666;
      }
    }

    .tulingLayout-gli {
      margin-top: 10px;
    }

    .tulingLayout-but {
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 30px;
      text-align: center;
      background-color: red;
      position: absolute;
      bottom: -15px;
      right: 15px;
      font-size: 12px;
      color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      i {
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .tulingLayout-table{
    display: block;
    padding: 0;
    .demo-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__header{
        margin: 0;
      }
      .el-tabs__content{
        flex: 1;
        min-height: 0;
        .el-tab-pane{
          height: 100%;
          padding: 2px 0;
          box-sizing: border-box;
          .demo-tabs_cont{
            height: 100%;
          }
          .demo-tabs_border{
            border: 1px dashed #000;
          }
        }
      }
    }
  }

  .tulingLayout-active {
    border: 1px dashed red;
  }
}

::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
